Kozaneba Development Diary 2022-05-26

/villagepump/nishio.icon

Miscellaneous Task List

A: Isn't it possible to import Kozaneba's UserScript like Scrapbox? That too from Scrapbox. I'll give it a try.

B: I heard somewhere (Nota Tech Conf?) that "functionally usable but not good looking" should not be neglected. Kozaneba is in exactly that situation, so I'm going to improve the appearance.

C: You can already use Kozaneba in its current state to move a Scrapbox card to any position and share it with others by attaching a permalink to the card's placement.

13:00

13:25 Pomodoro begins🍅.

A: Isn't it possible to import Kozaneba's UserScript like Scrapbox? That too from Scrapbox. I'll give it a try.

It is not enough to just write import in UserScript.

import "https://scrapbox.io/api/code/nishio/Kozaneba%E3%81%AEUserScript/script.js";

Cannot use import statement outside a module

Hmmm... I'm currently realizing UserScript by reading from LocalStorage and eval'ing, but that doesn't mean I can't import.

Oops, if you put in UserScript that causes serious errors, it dies on startup so you can't reach the edit screen (terrible).

I deleted it in the developer tools, but that's not good.

dynamic import is not allowed due to CORS restrictions

https://gyazo.com/fdb08ed037f662633fa1c572dba6bde9

Even if you replace the header on the server only for URLs you import directly, if you import code from another page from the code placed in Scrapbox, it will die there, so you won't be very happy anyway.

Import is intercepted and bundled locally and returned.

When you save the UserScript, it says Saved on the console, but it should be on the screen.

Breakdown on improving appearance with 4 minutes remaining

The button enclosure line is gone.

Help is available from the hatena icon on the status bar in the lower left corner, but ordinary users do not notice it, so a help button is placed in the upper right corner.

Only the arrow heads are 100% opaque.

Needs a major refactor, no real harm in use, so we left it alone, but it looks bad, so we'll improve it.

Arrowheads for nested groups may be misaligned.

Reproduction conditions are not clear

Help is available from the hatena icon on the status bar in the lower left corner, but ordinary users don't notice it, so a help button is placed in the upper right corner.

10min I added a help button.

https://gyazo.com/77bd12bcbb4f5a6efe7f02eec0f3528f

The button enclosure line is gone.

21min

https://gyazo.com/ccbe22abcddd817345735c1502a91756

CSS Specificity issue, DevMenu is an ID, but buttons added by user scripts are classes, so they did not have enough priority

Two minutes left, commit, close tab and prepare for next

I pushed it.

Notes of Concern

code::

WARNING in ./node_modules/@progfay/scrapbox-parser/esm/parse.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/nishio/kozaneba/node_modules/@progfay/scrapbox-parser/src/parse.ts' file: Error: ENOENT: no such file or directory, open '/Users/nishio/kozaneba/node_modules/@progfay/scrapbox-parser/src/parse.ts'

14:00

Only the arrow heads are 100% opaque.

before

https://gyazo.com/b409d614e2e158f361ba980172136b11

I see, to begin with, the current code has two steps: "draw a line" and "add an arrow head if necessary".

It's bracketed out because the drawing of the arrow heads is common regardless of the type of line, but it's wrong that they're separated on the time axis.

Initially, it was loosely coupled, which was fine, but it was ruined when the specification to match transparency was added.

It should have been separated lexically and integrated with drawing a line on the time axis with a function call.

8 minutes remaining

https://gyazo.com/a9d0ec92f97faddd12037bb017f1e70e

One step further ✅

15:00

The head of the translucent arrow overlaps and darkens because of the overlapping translucent lines.

To solve this problem, it is necessary to change the current structure that treats the object as a unit of "line" and create a layer that treats it as a unit of "object composed of several lines".

I wonder if we can do it in one pomodoro, we should commit at the moment anyway.

https://gyazo.com/655e4e98331b7ad24a3a7f5bd0e5401d

Fix bugs and commit

I introduced the SVG g element.

https://gyazo.com/fe5385f19ce49d8100aa8d74f1582100

I think we can do this.

Perfect!

I'd like to tweak the relationship between distance and density a bit more.

Let's commit so far for now ✅.

Modified to make the change in intensity continuous ✅.

/villagepump/nishio.icon

I've confirmed that the Netlify deployment is successful, I'll have to write release notes.

We sought ways to reproduce the problem for the next fix.

https://gyazo.com/eb11d1a9b3882d331c37e2fac21f569e

Condition to reproduce the problem, nesting is not required, but it seems to write arrows for groups.

I guess I better make a test case for Cypress first.

By declaring what I'm going to do today at the beginning of the page, I've prevented myself from getting sidetracked and starting to do Anki.

19:00

22:00

---